<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../../css/personimfcss/groupimf.css">
        <script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.js"></script>
        <script th:inline="javascript">
            var userid = [[${userid}]];
            var list;
            var page=1;
            var page1=(page-1)*2
            var count;
            var bnn=0
            var bnn1=0;
            //显示组织信息
            $(function(){
                $.ajax({
                    url:'organxingxi.do?userid='+userid,
                    success:function(data){//data服务器返回的数据
                        if (data.length!=0) {
                            $.each(data, function (index, groupxingxi) {
                                //创建dom
                                group = $("<tr><td>组织号</td><td>" + groupxingxi.gid + "</td></tr>"
                                    + "<tr><td>组织名称</td><td>" + groupxingxi.gname + "</td></tr>"
                                    + "<tr><td>组织人数</td><td>" + groupxingxi.gcount + "</td></tr>"
                                )
                                $("#showgroupxingxi").append(group);//渲染完毕
                            })
                            $('.tui').css('display', 'block');
                        }
                        else {
                            group=$("<p>你还没有加入组织，快去加入吧!<a href=\'javascript:void(0)\' id=\'join\' onclick=\'jionin()\'><b>+</b></a></p>")
                            $("#showgroupxingxi").append(group);//渲染完毕
                            $('.tui').css('display', 'none');
                        }

                    }
                });
            });
            function jionin() {
                $.ajax({
                    url:'getrole.do?userid='+userid,
                    success:function(data) {//data服务器返回的数据
                        if (data=="组织管理员"){
                            $("#po").css('display','block')
                            $('.zong').css('display', 'none');
                            $('.zong1').css('display','block')
                            $.ajax({
                                url:'showGroup.do?page='+page1,
                                success:function(data){//data服务器返回的数据
                                    var n=data[0].count;
                                    count=parseInt((n+6-1)/6)
                                    console.log(count)
                                    zong=$("<p>共"+count+"页 合计"+n+"条数据</p>")
                                    $("#shu").append(zong)

                                    $.each(data, function (index, groupxingxi) {
                                        //创建dom
                                        group = $("<tr><td>" + groupxingxi.gid + "</td>"
                                            + "<td>" + groupxingxi.gname + "</td>"
                                            + "<td>" + groupxingxi.gcount + "</td>"+
                                            "<td><a href=\'javascript:void(0)\' onclick=\'req("+groupxingxi.gid+")\'>加入</a></td></tr>"
                                        )
                                        $("#zhu").append(group);

                                    })

                                }
                            });

                        }
                        else {
                            console.log("cmkwnckwnww");
                            $('.zong').css('display', 'none');
                            $('.zong1').css('display','block')
                            $('#po').css('display','none')
                            $.ajax({
                                url:'showGroup.do?page='+page1,
                                success:function(data){//data服务器返回的数据
                                    var n=data[0].count;
                                    count=parseInt((n+6-1)/6)
                                    console.log(count)
                                    zong=$("<p>共"+count+"页 合计"+n+"条数据</p>")
                                    $("#shu").append(zong)

                                    $.each(data, function (index, groupxingxi) {
                                        //创建dom
                                        group = $("<tr><td>" + groupxingxi.gid + "</td>"
                                            + "<td>" + groupxingxi.gname + "</td>"
                                            + "<td>" + groupxingxi.gcount + "</td>"+
                                            "<td><a href=\'javascript:void(0)\' onclick=\'req("+groupxingxi.gid+")\'>加入</a></td></tr>"
                                        )
                                        $("#zhu").append(group);

                                    })

                                }
                            });
                        }
                    }
                });

                $("#page1").css("background-color","yellow")
            }
            function check() {
                var gid=$("#shousuo").val()
                $("#shousuo").val("");
                $("#zhu").empty();
                $.ajax({
                    url:'getgroupById.do?gid='+gid,
                    success:function(data){//data服务器返回的数据
                        $.each(data, function (index, groupxingxi) {
                            group = $("<tr><td>" + groupxingxi.gid + "</td>"
                                + "<td>" + groupxingxi.gname + "</td>"
                                + "<td>" + groupxingxi.gcount + "</td>"+
                                "<td><a href=\'javascript:void(0)\' onclick=\'req("+groupxingxi.gid+")\'>加入</a></td></tr>"
                            )
                            $("#zhu").append(group);
                        })

                    }
                });
            }
            function f() {
                page=1;
                page1=(page-1)*6
                $("#zhu").empty();
                lianjie(page1)
                $("#page1").css("background-color","yellow")
                $("#page2").css("background-color","white")
                $("#page3").css("background-color","white")

            }
            function f1() {
                if (count>=2) {
                    page = 2;
                    page1 = (page - 1) * 6
                    $("#zhu").empty();
                    lianjie(page1)
                    $("#page2").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page3").css("background-color", "white")
                }
            }
            function f2() {
                if (count>=3) {
                    page = 3;
                    page1 = (page - 1) * 6
                    $("#zhu").empty();
                    lianjie(page1)
                    $("#page3").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page2").css("background-color", "white")
                }
            }
            function shouye() {
                f()

            }
            function lianjie(page1) {
                $.ajax({
                    url:'showGroup.do?page='+page1,
                    success:function(data) {//data服务器返回的数据
                        $.each(data, function (index, groupxingxi) {
                            group = $("<tr><td>" + groupxingxi.gid + "</td>"
                                + "<td>" + groupxingxi.gname + "</td>"
                                + "<td>" + groupxingxi.gcount + "</td>"+
                                "<td><a href=\'javascript:void(0)\' onclick=\'req("+groupxingxi.gid+")\'>加入</a></td></tr>"
                            )
                            $("#zhu").append(group);
                        })
                    }
                });

            }
            function lastpage() {
                if (page > 1) {
                    page = page - 1
                    if (page == 1) {
                        f()
                    } else if (page == 2) {
                        f1()
                    } else if (page == 3) {
                        f2()
                    } else if (page > 0) {
                        page1 = (page - 1) * 6
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        if (page > 0) {
                            $("#zhu").empty();
                            lianjie(page1)
                        }
                    }
                }
            }
            function nextpage() {
                if (page < count) {
                    page = page + 1
                    if (page == 1) {
                        f()
                    } else if (page == 2) {
                        f1()
                    } else if (page == 3) {
                        f2()
                    } else if (page <= count) {
                        page = 4;
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        page1 = (page - 1) * 6
                        $("#zhu").empty();
                        lianjie(page1)
                    }

                }
            }
            function tiaozhuang() {
                var p = $("#tiao").val()
                if (p <= count && p > 0) {
                    if (p == 1) {
                        f()
                    } else if (p == 2) {
                        f1()
                    } else if (p == 3) {
                        f2()
                    } else if (p <= count) {
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        $("#tiao").val("")
                        page1 = (page - 1) * 6
                        $("#zhu").empty();
                        lianjie(page1)
                    }

                }
            }
            function weiye() {
                if (page==1){
                    f()
                }
                if (page==2){
                    f1()
                }
                if (page==3){
                    f2()
                }
                if (page>3){
                    $("#page2").css("background-color","white")
                    $("#page1").css("background-color","white")
                    $("#page3").css("background-color","white")
                    page1=(page-1)*6
                    $("#zhu").empty();
                    lianjie(page1)
                }
            }
            function req(gid) {
                console.log(gid)
                $('#background').css('display', 'block');
                $('#chenggong').css('display', 'inline');
                $('#chenggong1').css('display', 'none');
                $('#chenggong2').css('display', 'none');
                $.ajax({
                    url:'updatareqimf.do?userid='+userid+'&gid='+gid,
                    success:function(data){//data服务器返回的数据

                    }
                });
            }
            //普通成员退出组织
            function outgroup() {
                $.ajax({
                    url:'getrole.do?userid='+userid,
                    success:function(data) {//data服务器返回的数据
                        if (data=="组织管理员"){
                            $("#background2").css('display','block')
                            $("#mmm").css('display','none')
                            $("#kkk").css('display','block')
                            $("#que").css('display','block')

                    }
                        else {
                            $.ajax({
                                url:'outgroup.do?userid='+userid,
                                success:function(data) {//data服务器返回的数据
                                    $("#showgroupxingxi").empty();
                                    group=$("<p>你还没有加入组织，快去加入吧!<a href=\'javascript:void(0)\' id=\'join\' onclick=\'jionin()\'><b>+</b></a></p>")
                                    $("#showgroupxingxi").append(group);//渲染完毕
                                    $('.tui').css('display', 'none');
                                }
                            });

                        }
                    }
                });
            }
            //组织管理员，退出组织
            function outgroup1(){
                stunumber=$("#groupid2").val()
                $.ajax({
                    url:'selectBynum.do?stunumber='+stunumber,
                    success:function(data) {//data服务器返回的数据
                        if (data==0){
                            $("#background2").css('display','block')
                            $("#mmm").css('display','inline')
                            $("#kkk").css('display','none')
                            $("#que").css('display','none')
                        }
                        else {
                            $.ajax({
                                url:'updatarole.do?stunumber='+stunumber+'&userid1='+userid,
                                success:function(data) {//data服务器返回的数据
                                    $("#background2").css('display','none')
                                    $("#showgroupxingxi").empty();
                                    group=$("<p>你还没有加入组织，快去加入吧!<a href=\'javascript:void(0)\' id=\'join\' onclick=\'jionin()\'><b>+</b></a></p>")
                                    $("#showgroupxingxi").append(group);//渲染完毕
                                    $('.tui').css('display', 'none');
                                }
                            });
                        }

                    }
                })



            }
            //成立组织
            function makeGroup() {
                $("#background1").css('display','block')

            }
            //成立组织成功
            function susse() {
                var groupid=$("#groupid").val();
                var groupname=$("#groupname").val()
                var userid="2";
                var group=groupid+","+groupname+","+userid
                if(bnn==1&&groupid!=""&&groupname!=""&&bnn1==1){
                    $("#groupid").val("")
                    $("#groupname").val("")
                    $("#background1").css('display','none')
                    $('#background').css('display', 'block');
                    $('#chenggong').css('display', 'none');
                    $('#chenggong1').css('display', 'inline');
                    $('#chenggong2').css('display', 'none');
                    $.ajax({
                        url:'creategroup.do?group='+group,
                        success:function(data) {//data服务器返回的数据
                        }
                    });

                }else {
                    $("#background1").css('display','none')
                    $('#background').css('display', 'block');
                    $('#chenggong').css('display', 'none');
                    $('#chenggong1').css('display', 'none');
                    $('#chenggong2').css('display', 'inline');
                }
            }
            function jianyan() {
                var groupid=$("#groupid").val();
                $.ajax({
                    url:'getgroupById.do?gid='+groupid,
                    success:function(data){//data服务器返回的数据
                        if (data.length!=0){
                            bnn=0;
                            $("#gb").css('display','inline')
                        }
                        else {
                            bnn=1;
                            $("#gb").css('display','none')
                        }


                    }
                });

            }
            function getgroupByName() {
                var groupname=$("#groupname").val();
                $.ajax({
                    url:'getgroupByName.do?gname='+groupname,
                    success:function(data){//data服务器返回的数据
                      if (data==0){
                          bnn1=0
                          $("#gb1").css('display','inline')

                      }
                      else {
                          bnn1=1;
                          $("#gb1").css('display','none')
                      }


                    }
                });


            }

        </script>
    </head>
    <body>
        <div class="zong" >
            <div class="tui" style="display: none">
                <a href="javascript:void(0)" onclick="outgroup()">退出组织</a>
            </div>
            <table id="showgroupxingxi">
            </table>
            <div class="guanglitui">
                <!-- 弹窗内容开始 -->
                <div id="background2" class="back2" >
                    <div id="div12" class="content2">
                        <div id="close2">
                            <span id="close-button2">×</span>
                            <h4>组织管理员，请任命一个新的管理员</h4>
                        </div>
                        <div id="div22" >
                            <div class="groupimf2" >
                                <table id="kkk" >
                                    <tr><td>学号：</td><td><input type="text" id="groupid2" placeholder="请输入成员学号">
                                    </td></tr>
                                </table>
                                <a href="javascript:void(0)" onclick="outgroup1()" id="que">确定</a>
                                <h3 id="mmm" style="display: none;text-align: center" >你的组织没有这个人，请重新输入</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    var div2 = document.getElementById('background2');
                    var close2 = document.getElementById('close-button2');
                    close2.onclick = function close2() {
                        div2.style.display = "none";

                    }

                    window.onclick = function close2(e) {
                        if (e.target == div) {
                            div2.style.display = "none";
                        }
                    }
                </script>

            </div>
        </div>

        <div class="zong1" style="display:none;">
            <div class="main">
                <div class="header">
                    <div class="chazao">
                        查找组织：<input type="text" id="shousuo" placeholder="请输入组织编号">
                        <input type="button" id="button" value="搜索" onclick="check()" >
                        <a href="javascript:void(0)" onclick="makeGroup()" id="po" style="display: none">创建组织</a>
                    </div>
                </div>
                <div class="zuoce" style="width: 100%;height: 85%">
                    <table id="group" >
                        <thead id="group1">
                        <tr>
                            <td>组织编号</td><td>组织名称</td><td>成员数量</td><td>操作</td>
                        </tr>
                        </thead>
                        <tbody id="zhu">

                        </tbody>
                    </table>
                </div>
                <div class="page" >
                    <div class="g">
                        <span><a href="javascript:void(0)" onclick="shouye()">首页</a></span>
                        <span><a href="javascript:void(0)" onclick="lastpage()">上一页</a></span>
                        <ul>
                            <li onclick="f()" id="page1"><a href="javascript:void(0)">1</a></li>
                            <li onclick="f1()" id="page2"><a href="javascript:void(0)">2</a></li>
                            <li onclick="f2()" id="page3"><a href="javascript:void(0)">3</a></li>
                        </ul>
                        <span><a href="javascript:void(0)" onclick="nextpage()">下一页</a></span>
                        <span><a href="javascript:void(0)" onclick="weiye()">尾页</a></span>
                        <form action="">
                            <input type="text" id="tiao">
                            <input type="button" value="跳转" id="tiaobutton" onclick="tiaozhuang()">
                        </form>
                        <p id="shu"></p>
                    </div>

                </div>
                <div class="tanchuang">
                    <!-- 弹窗内容开始 -->
                    <div id="background" class="back" >
                        <div id="div1" class="content">
                            <div id="close">
                                <span id="close-button">×</span>
                                <h2>提示框</h2>
                            </div>
                            <div id="div2" >
                                <h3 style="text-align: center;display: none" id="chenggong">请耐心等待组织管理员的回复</h3>
                                <h3 style="text-align: center;display: none" id="chenggong1">创建组织成功</h3>
                                <h3 style="text-align: center;display: none" id="chenggong2">创建组织失败，请检查所填信息是否正确</h3>
                            </div>
                            <h3 id="foot"></h3>
                        </div>
                    </div>
                    <script>
                        var div = document.getElementById('background');
                        var close = document.getElementById('close-button');
                        close.onclick = function close() {
                            div.style.display = "none";
                        }

                        window.onclick = function close(e) {
                            if (e.target == div) {
                                div.style.display = "none";
                            }
                        }
                    </script>

                </div>



                <div class="chaungjian" >
                    <!-- 弹窗内容开始 -->
                    <div id="background1" class="back1" >
                        <div id="div11" class="content1">
                            <div id="close1">
                                <span id="close-button1">×</span>
                                <h2>创建组织</h2>
                            </div>
                            <div id="div21" >
                                <div class="groupimf">
                                    <table>
                                        <tr><td>组织编号：</td><td><input type="text" id="groupid" placeholder="请输入组织编号" onblur="jianyan()">
                                            <p id='gb' style='font-size: small;color: red;display: none'>该编号已被注册</p>
                                        </td></tr>
                                        <tr><td>组织名称：</td><td><input type="text" id="groupname" placeholder="请输入组织名称" onblur="getgroupByName()">
                                            <p id='gb1' style='font-size: small;color: red;display: none'>该组织已被注册</p></td></tr>
                                    </table>
                                    <a href="javascript:void(0)" onclick="susse()">确定</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        var div1 = document.getElementById('background1');
                        var close1 = document.getElementById('close-button1');
                        close1.onclick = function close1() {
                            div1.style.display = "none";
                        }

                        window.onclick = function close1(e) {
                            if (e.target == div) {
                                div1.style.display = "none";
                            }
                        }
                    </script>

                </div>
            </div>
        </div>

        
    </body>
</html>